<template>
  <vxe-grid
      class="mytable-style"
      stripe
      border
      show-overflow
      resizable
      row-id="id"
      height="600"
      :scroll-y="{gt: 200}"
      :columns="columns"
      :cell-class-name="cellClassName"
      size="medium"
      :tree-config="{children: 'children', expandRowKeys: defaultExpandKeys}"
      :data="tableData2">
<!--    <vxe-table-column field="name" title="姓名/分组" tree-node></vxe-table-column>-->
<!--    <vxe-table-column field="size" title="Size"></vxe-table-column>-->
<!--    <vxe-table-column field="type" title="Type"></vxe-table-column>-->
<!--    <vxe-table-column field="date" title="Date"></vxe-table-column>-->
  </vxe-grid>
</template>

<script>

import projectTaskApi from '@/api/projectTaskApi'
import * as format from "@/filters";

export default {
  name: "schedulerTable",
  props: {
    planData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      isFrist: false,
      tableData2: [],
      allData: [],
      defaultExpandKeys: [1005],
      columns: [
        {
          field: 'Name',
          title: '姓名/分组',
          sortable: true,
          treeNode: true,
          align: 'center',
          resizable: false,
          fixed: 'left',
          width: '200px'
        }
      ]
    }
  },
  methods: {
    // 获取当前任务
    getTask (a=[]) {
      console.log(a)
      let aa = []
      a.forEach((it, index) => {
        aa.push(`任务${index + 1}：` + it.Taskname + '<br/>时间：' + this.addDay(it.Started, 0, 'yyyy-MM-dd hh:mm') + '~' + this.addDay(it.Ended, 0, 'yyyy-MM-dd hh:mm'))
      })
      return aa.join('<br/>')
    },
    cellClassName ({ row, rowIndex, column, columnIndex }) {
      // console.log(JSON.stringify(row[column.property]))
      if (columnIndex > 0 && row[column.property]) {
        return 'col-red'
      }
    },
    getDataByAll () {
      if (this.isFrist) return
      this.isFrist = true
      let data = {
        Planid: this.planData.Id,
        id: this.planData.Projectid
      }
      projectTaskApi.getPersonByAll(data).then(res => {
        this.handlerData(res||[])
      })
    },
    addDay (st, t = 0, formatStr='yyyy-MM-dd') {
      let a = ''
      if (st.toString().length === 13) {
        a = format.formatDatetime((st + t), formatStr)
      } else {
        a = format.formatDatetime((st + t) * 1000, formatStr)
      }
      return a
    },
    // 处理数据
    handlerData (data) {
      let b = []
      let a = []
      data.forEach(it => {
        (it.AllTask || []).forEach(it => {
          if (it.Started) {
            it.Started = it.Started.toString().length === 10 ? it.Started * 1000 : it.Started
          }
          if (it.Ended) {
            it.Ended = it.Ended.toString().length === 10 ? it.Ended * 1000 : it.Ended
          }
        })
        a.push({
          Id: it.Id,
          Name: it.Name,
          children: (it.AllTask || [])
        })
        b.push(...(it.AllTask || []))
      })
      // 获取最小时间
      let min = b.filter(it => it.Started > 0).map(it => it.Started)
      min = Math.min(...min)
      // 获取最大时间
      let max = b.filter(it => it.Ended > 0).map(it => it.Ended)
      max = Math.max(...max)
      let aaa = ((max - min) / (86400 * 1000)) + 10
      let columns = []
      for (let i = 0; i < aaa; i++) {
        let a = this.addDay(min, i * 86400 * 1000)
        columns.push({
          field: a,
          title: a,
          sortable: true,
          align: 'center',
          resizable: false,
          width: '150px',
          slots: {
            default: ({ row, rowIndex, column, columnIndex }) => {
              if (columnIndex > 0) {
                if (row.value && row.value.length > 0) {
                  let a = this.showPersone(row.value, column.property)
                  let w = a.length
                  if (w > 0) {
                    let c = this.getTask(a)
                    return [
                      <el-tooltip effect="light" placement="bottom">
                        <div slot="content"><div domPropsInnerHTML={c}></div></div>
                        <el-badge value={w} class="item">
                        </el-badge>
                      </el-tooltip>
                    ]
                  }
                  // return a
                }
              }
            }
          }
        })
      }
      this.columns.push(...columns)
      this.mergePerson(a)
    },
    showPersone (data, property) {
      let ss = []
      data.forEach(it => {
        let s = this.addDay(it.Started, 0)
        let e = this.addDay(it.Ended, 0)
        if (s <= property && property <= e) {
          ss.push(it)
        }
      })
      return ss
    },
    // 和并人
    mergePerson (www) {
      let c = []
      // 和并人
      www.forEach(it => {
        let c1 = {Name: it.Name, children: []}
        let cc = {}
        it.children.forEach(it1 => {
          if (it1.Started && it1.Ended) {
            if (!cc[it1.Acceptrealname]) {
              cc[it1.Acceptrealname] = []
            }
            cc[it1.Acceptrealname].push(it1)
          }
        })
        for (const key in cc) {
          c1.children.push({
            Name: key,
            value: cc[key]
          })
        }
        c.push(c1)
      })
      this.tableData2 = c
    }
  },
  watch: {
    planData: {
      deep: true,
      immediate: true,
      handler (n, o) {
        if (n) {
          if (n.Projectid) {
            // this.getDataByAll()
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.mytable-style >>> .vxe-body--column.col-red {
  /*background-color: red;*/
  /*color: #fff;*/
  margin: 20px 0;
}
</style>